<template>
    <div>
        <div class="form">
            <section class="body">
                <p class="hedd-text">帮TA证明</p>
                <div class="smallTitle">姓名</div>
                <van-field v-model="name" type="text" placeholder="姓名" maxlength="10" />
                <div class="smallTitle">身份证号</div>
                <van-field v-model="number" placeholder="身份证号" maxlength="18" />
                <div class="smallTitle">关系</div>
                <van-field v-model="relation" type="text" placeholder="关系" maxlength="10" />
                <div class="smallTitle">证明内容</div>
                <van-field
                    v-model="certifier_content"
                    type="text"
                    placeholder="证明内容"
                    maxlength="30"
                />
            </section>
        </div>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >完成</van-button>
        </footer>
    </div>
</template>

<script>
import { Field, Toast, Button } from "vant";
import { setCertifier } from "@/api/api";
export default {
    components: {
        [Field.name]: Field,
        [Button.name]: Button
    },
    data() {
        return {
            name:'',
            number:'',
            relation:'',
            certifier_content:''
        };
    },
    methods: {
        submit() {
            let reg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (this.name == "") {
                Toast("请输入姓名");
                return false;
            }
            if (reg.test(this.number) === false) {
                Toast("请正确输入的身份证号");
                return false;
            }
            if (this.relation == "") {
                Toast("请输入关系");
                return false;
            }
            if (this.relation == "") {
                Toast("请输入证明内容");
                return false;
            }
            setCertifier({
                prepare_id:this.$route.query.id,
                name:this.name,
                number:this.number,
                relation:this.relation,
                certifier_content:this.certifier_content
            }).then(res=>{
                if(res.code){
                    Toast("成功");
                    this.$router.push({
                        path: "/Detail",
                        query: { id: this.$route.query.id }
                    });
                }else{
                    Toast(res);
                }
            })
        }
    }
};
</script>

<style scoped>
.smallTitle {
    display: flex;
    justify-content: space-between;
    margin: 8px 0 14px;
    height: 24px;
    align-items: center;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.8);
    line-height: 20px;
}
</style>